<template>
    <view class="editQuestionPageStyle">
        <view class="topStyle" >
            <u-input placeholder="请输入关键字" prefixIcon="search"
                prefixIconStyle="font-size: 32px;color: #909399; padding:0 14rpx"
                customStyle="border-radius: 24rpx; height: 60rpx; margin-top: 20rpx"
                @confirm="onSearch"
                 v-model="searchValue"
                ></u-input>
            <u-tabs :list="tabList" lineColor="#37B874" @click="onTabclick"></u-tabs>
        </view>
        <scroll-view :scroll-y="true" class="scrollStyle" 
            @scrolltolower="onScrollToLower"
            :style="{  maxHeight: `calc(100vh - ${(safeAreaInsets.bottom * 2) + 352}rpx )`,height: `calc(100vh - ${(safeAreaInsets.bottom * 2) + 352}rpx )` }">
            <view v-if="planList.length">
                <view class="itemStyle" v-for="item in planList"  @click="onJump(item)" :key="item.id" >
                    <image :src="`./static/${selectActiveKey.includes(item.id)?'selectIcon':'noSelectIcon'}.svg`" style="width: 32rpx;height: 32rpx;" @click.stop="(e)=>onSelect(e,item)"/>
                    <view class="quStyle">{{ onQuType(item.type) }}</view>
                    <view class="flex1 oneWrap">
                        {{ item.itemText }}
                    </view>
                </view>
                <u-loadmore :status="loadStatus" @loadmore="onLoadmore" />
            </view>
            <view v-else style="margin-top: 20%;"class="center">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
            <view style="height:1rpx ;"></view>
        </scroll-view>
        <view class="bottomStyle">
            <view class="flex center" @click="onDelete">
                <image src="./static/delIcon.svg" style="width: 34rpx; height: 36rpx;margin-right: 22rpx;"/>
                <text>删除</text>
            </view>
            <view class="flex center"  @click="onAllSelect">
                <image :src="`./static/${(selectActiveKey.length<planList.length||!planList.length)?'noSelectIcon':'selectIcon' }.svg`" style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"/>
                <text v-if="(selectActiveKey.length<planList.length)||!planList.length">全选</text>
                <text v-else>取消全选</text>
            </view>
        </view>
    </view>
</template>

<script>
import {QUESTION_TYPE} from "../data/TestQuestionsType";
import { getArrObjectByProperty, notificationFun } from "../utils/PrjUtils";
import {delTheoryItem, itemTypes,pageItem,} from "./services/myQuestionBankService"
export default {
    name: 'editQuestionPage',
    data() {
        return {
            // 安全区域
            safeAreaInsets: { bottom: 0 },
            tabList: [{name: '全部',value: "",}],
            selectRowData:[],
            // 上页数据
            pInfo: {},
            queryData: {
                queryKey: "",
                type:"",
                pageNo: 1,
                pageSize: 10,
            },
            // 查询字段
            searchValue:"",
            //加载前值为loadmore，加载中为loading，没有数据为nomore
            loadStatus: 'loadmore',
            planList: [],
            // 全选id
            selectActiveKey: [],
            // 试题类型
            QUESTION_TYPE:QUESTION_TYPE,
        };
    },
    methods: {
        onJump(item) {
            uni.navigateTo({
                url: 'singleQuestionPage?info=' + encodeURIComponent(JSON.stringify({...this.pInfo,modelType:"edit",...item}))
            })
        },
        //全选
        onAllSelect(){
            if(this.selectActiveKey.length<this.planList.length){
                this.selectActiveKey=this.planList.map(item=>item.id)
            }
            else{
                this.selectActiveKey=[]
            }
        },
        // 查询题型
        onQueryQuType(){
            itemTypes({subjectUuid: this.pInfo.subjectUuid}).then(res=>{
                if(res&&res.length>0){
                    this.tabList=[...res.map(item=>({name: item.label, value: item.type}))]
                }
            }).catch(err=>{
                
            })
        },
        // 查询列表数据
        onGetListData(queryData) {
            this.loadStatus = 'loading'
            pageItem(queryData).then(res => {
                let newListData = queryData.pageNo === 1 ? [...res.datas] : [...this.planList, ...res.datas]
                // console.log(newListData)
                if (newListData.length >= res.totalCount) {
                    this.loadStatus = 'noMore'
                } else {
                    this.loadStatus = 'loadmore'
                }
                this.planList = newListData
            }).catch(err => {
                this.loadStatus = 'loadmore'
            })
        },
        // 点击tab
        onTabclick(item){
            console.log(item,this.tabList,"---102")
            this.queryData={...this.queryData,type:this.tabList[item.index].value,pageNo:1}
        },
        // 多选
        onSelect(event,item){
            event.stopPropagation();
            if(this.selectActiveKey.includes(item.id)){
                this.selectActiveKey=this.selectActiveKey.filter(i=>i!==item.id)
            }else{
                this.selectActiveKey.push(item.id)
            }
        },
        // 删除
        onDelete(){
            if(!this.selectActiveKey.length){
                return notificationFun("请先选择试题！")
            }
            let that=this
            uni.showModal({
                title: '温馨提示',
                content: '您确定删除吗？',
                success: (res) => {
                    delTheoryItem({idStr: this.selectActiveKey}).then(res=>{
                        notificationFun("删除成功！")
                        that.queryData={...that.queryData,pageNo:1}
                    })
                }
            });
        },
        onQuType(value){
            if(value){
               return getArrObjectByProperty(QUESTION_TYPE, 'value', value)?.text
            }
            return ""
        },
        onSearch(){
            this.queryData = {
                ...this.queryData,
                queryKey: this.searchValue,
                pageNo:1
            }
        },
        //加载更多触发
        onLoadmore() {
            console.log("onLoadmore")
            // this.planList = [...this.planList, ...[2, 3, 4]]
            this.queryData = {
                ...this.queryData,
                pageNo: this.queryData.pageNo + 1
            }
        },
        onScrollToLower(e) {
            if (this.loadStatus === 'loadmore') {
                this.queryData = {
                    ...this.queryData,
                    pageNo: this.queryData.pageNo + 1
                }
            }
        },
    },
    onLoad(option) {
        this.pInfo=JSON.parse(decodeURIComponent(option.info))
    },
    onShow(){
        this.queryData={...this.queryData,pageNo:1,subjectUuid: this.pInfo.subjectUuid}
        this.onQueryQuType()
    },
    mounted() {
        // Add your mounted logic here
    },
    beforeMount() {
        uni.getSystemInfo({
            success: (res) => {
                console.log(res.safeAreaInsets)
                // this.windowWidth = res.windowWidth
                // this.windowHeight = res.windowHeight
                this.safeAreaInsets = res.safeAreaInsets
            }
        })
    },
    computed: {

    },
    watch: {
        queryData: {
            handler: function (val, oldVal) {
                if(val.subjectUuid){
                    this.onGetListData({...this.queryData,...val})
                }
            },
            deep: true
        },
      
    },
};
</script>

<style scoped lang="scss">
.editQuestionPageStyle {
    background-color: #f3f3f3;
    height: 100vh;
    box-sizing: border-box;
    .topStyle {
        padding:32rpx 30rpx 0 30rpx;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
        background-color: #fff;
    }
    .scrollStyle {
        border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        margin-top: 20rpx;
        box-sizing: border-box;
        background-color: #fff;
        .quStyle {
            border: 1px solid #37B874;
            box-sizing: border-box;
            border-radius: 20px 20px 20px 0;
            padding: 2px 8px;
            background-color: #F3FBF7;
            display: inline-block;
            margin: 0 20rpx;
        }

        .itemStyle {
            padding: 56rpx 30rpx;
            display: flex;
            border-bottom: 1rpx solid #F2F2F2;
            align-items: center;
        }

        .active {
            background: rgba(55, 184, 116, 1);
            border-radius: 50%;
            /* padding: 4rpx; */
            width: 13px;
            height: 13px;
            border: 1px solid rgba(55, 184, 116, 1);
        }

        .noActive {
            background: #FFF;
            border-radius: 50%;
            /* padding: 2px; */
            width: 13px;
            height: 13px;
            border: 1px solid #F2F2F2;
        }
    }

    .bottomStyle {
        padding: 42rpx 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1rpx solid #F2F2F2;
        background-color: #fff;
    }
}
</style>